import React from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import { Button } from 'antd'
import css from './index.scss'

const navArr = [
    {
        nav: '/',
        navName: '首页'
    },
    {
        nav: '/redux',
        navName: 'redux'
    },
    {
        nav: '/thunk',
        navName: 'redux-thunk 新闻'
    },
    {
        nav: '/saga',
        navName: 'redux-saga 新闻'
    },
    {
        nav: '/context',
        navName: 'context'
    },
    {
        nav: '/hooks',
        navName: 'hooks'
    },
    {
        nav: '/about/2',
        navName: 'hooks请求数据'
    }
]

const Nav = props => {
    console.log(props)
    console.log('这里')
    return (
        <div className={css.header}>
            {navArr.map((item, index) => (
                <NavLink className={css.nav} to={item.nav} key={index} exact>
                    <Button type={props.location.pathname === item.nav ? 'danger' : 'primary'}>
                        {item.navName}
                  </Button>
              </NavLink>
            ))}
      </div>
    )
}

export default withRouter(Nav)
